<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ResetInfoType } from '@/types/login'
import {
  checkAccountValid,
  checkPhoneValid,
  checkPasswordValid,
  debounce
} from '@/utils/verify'

// import * as api from '@/api/login'

import { useI18n } from '@/hooks/web/useI18n'
const { t } = useI18n()

const resetInfo = reactive<ResetInfoType>({
  account: '',
  phone: '',
  verifyCode: '',
  password: '',
  confirmPassword: ''
})

const resetPasswordForm = ref()

const resetRules = {
  account: [
    {
      required: true,
      message: t('system.login.accountPlaceholder'),
      trigger: 'blur'
    },
    { validator: checkAccountValid, trigger: 'blur' }
  ],
  phone: [
    {
      required: true,
      message: t('system.login.mobilePlaceholder'),
      trigger: 'blur'
    },
    { validator: checkPhoneValid, trigger: 'blur' }
  ],
  verifyCode: [
    {
      required: true,
      message: t('system.login.smsPlaceholder'),
      trigger: 'blur'
    }
  ],
  password: [
    {
      required: true,
      message: t('system.login.passwordPlaceholder'),
      trigger: 'blur'
    },
    {
      min: 6,
      max: 30,
      message: t('system.login.PwdLength')
    },
    { validator: checkPasswordValid, trigger: 'change' }
  ],
  confirmPassword: [
    {
      required: true,
      message: t('system.login.passwordPlaceholder'),
      trigger: 'blur'
    },
    {
      validator: debounce((rule, value) => {
        if (value && value !== resetInfo.password) {
          return Promise.reject(t('system.login.diffPwd'))
        } else {
          return Promise.resolve()
        }
      }),
      trigger: 'change'
    }
  ]
}

const emits = defineEmits(['switchForm'])
const clickDiffFormBtn = (formName: string) => {
  emits('switchForm', formName)
}
//这里向后端请求发送验证码
const getVCodeResult = () => {
  console.log('getVCODERESULT')
}
// const getVCodeResult = async () => {
//   let VCodeRequestResult = undefined
//   let accountCheckResult = await new Promise(resolve => {
//     phoneLoginForm.value.validateField('account', errorMessage => {
//       resolve(errorMessage)
//     })
//   })

//   if (!accountCheckResult) {
//     VCodeRequestResult = await api.sendVerifyCode(
//       phoneLoginInfo.phone,
//       'phone',
//       'register'
//     )
//   }
//   return VCodeRequestResult
// }
</script>

<template>
  <div>
    <div class="login-form-title">{{ t('system.login.forgetFormTitle') }}</div>
    <a-form :model="resetInfo" :rules="resetRules" ref="resetPasswordForm">
      <a-form-item name="account">
        <a-input
          v-model:value="resetInfo.account"
          :placeholder="$t('system.login.accountPlaceholder')"
        />
      </a-form-item>
      <a-form-item name="phone">
        <a-input
          v-model:value="resetInfo.phone"
          :placeholder="$t('system.login.mobilePlaceholder')"
        />
      </a-form-item>
      <div class="inline-input-btn">
        <a-form-item name="verifyCode">
          <a-input
            v-model:value="resetInfo.verifyCode"
            :placeholder="$t('system.login.smsPlaceholder')"
          />
        </a-form-item>
        <send-verify-code
          :totalCountDownTime="60"
          :enabled="true"
          :getVCodeResult="getVCodeResult"
        />
      </div>
      <a-form-item name="password">
        <a-input-password
          v-model:value="resetInfo.password"
          :placeholder="$t('system.login.passwordPlaceholder')"
          visibilityToggle
        />
      </a-form-item>
      <a-form-item name="confirmPassword">
        <a-input-password
          v-model:value="resetInfo.confirmPassword"
          :placeholder="$t('system.login.passwordPlaceholderAgain')"
        />
      </a-form-item>
      <div class="bottom-btns">
        <a-button type="primary">{{ t('system.login.resetButton') }}</a-button>
        <a-button @click="clickDiffFormBtn('loginForm')">{{
          t('system.login.backSignIn')
        }}</a-button>
      </div>
    </a-form>
  </div>
</template>

<style lang="less" scoped>
@import '../../../style/login.less';

// .bottom-btns {
//   &::after {
//     content: '';
//     display: block;
//     height: 70.84px;
//     @media (max-width: 1170px) {
//       display: none;
//     }
//   }
// }
</style>
